<template>
  <div class="pd-20">
    <el-form ref="formRefs"
             :model="formModel"
             :rules="formRules"
             label-width="120px">
      <el-form-item label="标题："
                    prop="title">
        <el-input v-model="formModel.title"
                  placeholder="请输入标题"
                  class="w-200"></el-input>
      </el-form-item>
      <el-form-item label="内容类型："
                    prop="type">
        <el-radio-group v-model="formModel.type">
          <el-radio :label="1">链接</el-radio>
          <el-radio :label="2">文本</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="URL："
                    prop="url"
                    v-if="formModel.type === 1">
        <el-input v-model="formModel.url"
                  placeholder="请输入URL"
                  type="textarea"></el-input>
      </el-form-item>

      <el-form-item label="介绍内容："
                    prop="content"
                    v-if="formModel.type === 2">
        <div ref="editor">
          <vue-neditor-wrap :destroy="true"
                            v-model="formModel.content"
                            :config="myConfig"></vue-neditor-wrap>
        </div>
      </el-form-item>
    </el-form>
    <p align="center">
      <el-button type="success"
                 @click="submitForm">保 存</el-button>
    </p>
  </div>
</template>
<script>
  import VueNeditorWrap from 'vue-neditor-wrap'
  export default {
    name: 'specialDisease', // 专病健康筛查活动
    data () {
      return {
        formModel: {
          title: '',
          type: 1,
          content: ''
        },
        myConfig: {
          // 你的UEditor资源存放的路径,相对于打包后的index.html
          UEDITOR_HOME_URL: this.api.uEditorHomeUrl,
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: '418',
          // 初始容器宽度
          initialFrameWidth: '100%',
          // 关闭自动保存
          enableAutoSave: false,
          scaleEnabled: true
        },
        formRules: {
          title: [{ required: true, message: '请输入标题', trigger: 'blur' }]
        }
      }
    },
    methods: {
      submitForm () {
        this.$refs.formRefs.validate(async valid => {
          if (valid) {
            const { data: res } = await this.post(this.api.promote.saveActivityIntroduction, this.formModel);
            if (res.code === '200') {
              this.$message.success('保存成功!');
              this.getDetail();
            }
          }
        })
      },
      async getDetail () {
        const { data: res } = await this.post(this.api.promote.getActivityIntroduction);
        if (res.code === '200') {
          this.formModel = res.object;
        }
      }
    },
    created () {
      this.getDetail();
    },
    components: {
      VueNeditorWrap
    }
  }
</script>
<style scoped lang="scss">
</style>
